<template>
  <SelectTrigger label="影像加载方式" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示viewer 的一些配置项，隐藏所有的组件、商标等等，设置了天空盒子
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  function removeAllImagery() {
    viewer.imageryLayers.removeAll();
  }



  options.value = [
    {
      text: "加载Cesium默认影像",
      onselect: function () {
        removeAllImagery();
        console.log("加载Cesium默认影像");

        /**
         * 新增默认的影像资产
         * Cesium.createWorldImagery API 删除
         */
        const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(
          Cesium.IonImageryProvider.fromAssetId(3)
        );
        viewer.imageryLayers.add(imageryLayer);
      },
    },
    {
      text: "加载Arcgis影像",
      onselect: async function () {
        removeAllImagery();
        console.log("加载Arcgis影像");
        // Cesium1.107 版本后使用该API
        const arcgisProvider =
          await Cesium.ArcGisMapServerImageryProvider.fromUrl(
            "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          );
        viewer.imageryLayers.addImageryProvider(arcgisProvider);
      },
    },
    {
      text: "加载Bingmap影像",
      onselect: async function () {
        removeAllImagery();
        console.log("加载Bingmap影像");
        const bingStyle = [
          Cesium.BingMapsStyle.AERIAL,
          Cesium.BingMapsStyle.AERIAL_WITH_LABELS,
          Cesium.BingMapsStyle.AERIAL_WITH_LABELS_ON_DEMAND,
          Cesium.BingMapsStyle.ROAD,
          Cesium.BingMapsStyle.ROAD_ON_DEMAND,
          Cesium.BingMapsStyle.CANVAS_DARK,
          Cesium.BingMapsStyle.CANVAS_LIGHT,
          Cesium.BingMapsStyle.CANVAS_GRAY,
          Cesium.BingMapsStyle.ORDNANCE_SURVEY,
          Cesium.BingMapsStyle.COLLINS_BART,
        ];
        const bingMapProvider = await Cesium.BingMapsImageryProvider.fromUrl(
          "https://dev.virtualearth.net",
          {
            key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",
            mapStyle: bingStyle[3],
          }
        );
        viewer.imageryLayers.addImageryProvider(bingMapProvider);
      },
    },
    {
      text: "加载Arcgis影像+网格",
      onselect: async function () {
        removeAllImagery();
        console.log("加载Arcgis影像+网格");
        // GridImageryProvider。展示内部渲染网格划分情况，了解每个瓦片的精细度
        const arcgisProvider =
          await Cesium.ArcGisMapServerImageryProvider.fromUrl(
            "https://sampleserver6.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
          );
        viewer.imageryLayers.addImageryProvider(arcgisProvider);
        // 经纬度网格
        const gridImageryProvider = new Cesium.GridImageryProvider({
          tilingScheme: new Cesium.GeographicTilingScheme(), // 使用地理投影网格
          cells: 8, // 每个瓦片行列数
          color: Cesium.Color.YELLOW, // 网格线颜色
          glowColor: Cesium.Color.RED, // 网格线的外发光颜色
          backgroundColor: Cesium.Color.BLUE.withAlpha(0.5), // 背景色（带透明度）
        });
        viewer.imageryLayers.addImageryProvider(gridImageryProvider);
        viewer.imageryLayers.raiseToTop(gridImageryProvider); //将图层置顶
      },
    },
    {
      text: "加载Arcgis影像+网格+瓦片",
      onselect: async function () {
        removeAllImagery();
        console.log("加载Arcgis影像+网格");
        // 5、GridImageryProvider。展示内部渲染网格划分情况，了解每个瓦片的精细度
        const arcgisProvider =
          await Cesium.ArcGisMapServerImageryProvider.fromUrl(
            "https://sampleserver6.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
          );
        viewer.imageryLayers.addImageryProvider(arcgisProvider);
        // 经纬度网格
        const gridImageryProvider = new Cesium.GridImageryProvider({
          // tilingScheme: new Cesium.GeographicTilingScheme(), // 使用地理投影网格
          // cells: 8, // 每个瓦片行列数
          // color: Cesium.Color.YELLOW, // 网格线颜色
          // glowColor: Cesium.Color.RED, // 网格线的外发光颜色
          // backgroundColor: Cesium.Color.BLUE.withAlpha(0.5), // 背景色（带透明度）
        });
        viewer.imageryLayers.addImageryProvider(gridImageryProvider);
        const tileCoordinatesProvider =
          new Cesium.TileCoordinatesImageryProvider();
        viewer.imageryLayers.addImageryProvider(tileCoordinatesProvider);
        viewer.imageryLayers.raiseToTop(tileCoordinatesProvider); //将图层置顶
      },
    },
    {
      text: "加载osm",
      onselect: async function () {
        removeAllImagery();
        console.log("加载osm");
        // OpenStreetMapImageryProvider。OSM影像服务，根据不同的url选择不同的风格
        const osm = new Cesium.OpenStreetMapImageryProvider({
          url: "https://a.tile.openstreetmap.org/",
          minimumLevel: 0,
          maximumLevel: 18,
          fileExtension: "png",
        });
        viewer.imageryLayers.addImageryProvider(osm);
      },
    },
    {
      text: "加载mapBox(没有权限)",
      onselect: async function () {
        removeAllImagery();
        console.log("加载mapBox");
        // MapboxImageryProvider。Mapbox影像服务，根据mapId指定地图风格
        var mapIds = [
          "mapbox.satellite",
          "mapbox.streets",
          "mapbox.streets-basic",
          "mapbox.light",
          "mapbox.streets-satellite",
          "mapbox.wheatpaste",
          "mapbox.comic",
          "mapbox.outdoors",
          "mapbox.run-bike-hike",
          "mapbox.pencil",
          "mapbox.pirates",
          "mapbox.emerald",
          "mapbox.high-contrast",
        ];
        viewer.imageryLayers.addImageryProvider(
          new Cesium.MapboxImageryProvider({
            mapId: mapIds[0],
            accessToken:
              "pk.eyJ1IjoibHM4NzAwNjEwMTEiLCJhIjoiY2tqYXZlZ2JrMDI5bTJzcDJmdDNteGhsNyJ9.0wTn4B1ce9Q4U5GnPso5iA",
          })
        );
      },
    },
    {
      text: "加载单张图片",
      onselect: async function () {
        removeAllImagery();
        console.log("加载单张图片");
        // SingleTileImageryProvider。单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下
        const imagelayer = new Cesium.SingleTileImageryProvider({
          url: new URL("./worldimage.jpg", import.meta.url).href,
          rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), // 覆盖的经纬度范围
          tileWidth: 512, // 设置瓦片宽度
          tileHeight: 512, // 设置瓦片高度
        });
        viewer.imageryLayers.addImageryProvider(imagelayer);
      },
    },
    {
      text: "加载TileMapServiceImageryProvider",
      onselect: async function () {
        removeAllImagery();
        console.log("加载TileMapServiceImageryProvider");
        // TileMapServiceImageryProvider。访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles.
        // 看文档是根据MapTiler规范，貌似是可以自己下载瓦片，发布服务，类似ArcGIS影像服务的过程
        const imagelayer = new Cesium.TileMapServiceImageryProvider({
          url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        });
        viewer.imageryLayers.addImageryProvider(imagelayer);
      },
    },
    {
      text: "加载UrlTemplateImageryProvider",
      onselect: async function () {
        removeAllImagery();
        console.log("加载UrlTemplateImageryProvider");
        const osmImageryProvider1 = new Cesium.UrlTemplateImageryProvider({
          url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          // subdomains: ["t1", "t2", "t3"],
        });
        viewer.imageryLayers.addImageryProvider(osmImageryProvider1);
      },
    },
    {
      text: "加载OGC-WMS(没有权限)",
      onselect: async function () {
        removeAllImagery();
        console.log("加载OGC-WMS");
        const provider = new Cesium.WebMapServiceImageryProvider({
          url: "https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi",
          layers: "MODIS_Terra_Corrected_Reflectance_True_Color",
          parameters: {
            transparent: true,
            format: "image/png",
          },
        });
        viewer.imageryLayers.addImageryProvider(provider);
        // 设置摄像头视图
      },
    },
    {
      text: "加载OGC-WMTS",
      onselect: async function () {
        removeAllImagery();
        console.log("加载OGC-WMTS");
        var shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
          url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS",
          layer: "World_Imagery",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "default028mm",
          maximumLevel: 23,
        });
        viewer.imageryLayers.addImageryProvider(shadedRelief1);
      },
    },
    {
      text: "加载OGC-WMTS-----测试",
      onselect: async function () {
        removeAllImagery();
        console.log("加载OGC-WMTS-----测试");
        var shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021%3Apublic2021new&style=&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021:public2021new&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021:public2021new&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          layer: "jbt_xht_gkb_2021:public2021new",
          format: "image/png",
          tileMatrixSetID: "EPSG:4326",
          style: "",
          tileMatrixLabels: [
            "EPSG:4326:0",
            "EPSG:4326:1",
            "EPSG:4326:2",
            "EPSG:4326:3",
            "EPSG:4326:4",
            "EPSG:4326:5",
            "EPSG:4326:6",
            "EPSG:4326:7",
            "EPSG:4326:8",
            "EPSG:4326:9",
            "EPSG:4326:10",
            "EPSG:4326:11",
            "EPSG:4326:12",
            "EPSG:4326:13",
            "EPSG:4326:14",
            "EPSG:4326:15",
            "EPSG:4326:16",
            "EPSG:4326:17",
            "EPSG:4326:18",
            "EPSG:4326:19",
            "EPSG:4326:20",
            "EPSG:4326:21",
          ],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          // tilingScheme: new Cesium.WebMercatorTilingScheme(),
        });

        viewer.imageryLayers.addImageryProvider(shadedRelief1);
        // 设置摄像头视图
      },
    },
    {
      text: "加载OGC-WMTS-----测试2",
      onselect: async function () {
        removeAllImagery();
        console.log("加载OGC-WMTS-----测试2");
        var shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021%3Apublic2021new&style=&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021:public2021new&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021:public2021new&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
          url: new Cesium.Resource({
            url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts",
            queryParameters: {
              authkey: "50ee80e3-2c48-401c-8544-5d1e764cbdc4",
              layer: "jbt_xht_gkb_2021:public2021new",
              tilematrixset: "EPSG:4326",
              Format: "image/png",
              Service: "WMTS",
              Request: "GetTile",
              Version: "1.0.0",
              TileMatrix: "EPSG:4326:{level}",
              TileCol: "{col}",
              TileRow: "{row}",
            },
          }),
          layer: "jbt_xht_gkb_2021:public2021new",
          format: "image/png",
          tileMatrixSetID: "EPSG:4326",
          style: "",
          tileMatrixLabels: [
            "EPSG:4326:0",
            "EPSG:4326:1",
            "EPSG:4326:2",
            "EPSG:4326:3",
            "EPSG:4326:4",
            "EPSG:4326:5",
            "EPSG:4326:6",
            "EPSG:4326:7",
            "EPSG:4326:8",
            "EPSG:4326:9",
            "EPSG:4326:10",
            "EPSG:4326:11",
            "EPSG:4326:12",
            "EPSG:4326:13",
            "EPSG:4326:14",
            "EPSG:4326:15",
            "EPSG:4326:16",
            "EPSG:4326:17",
            "EPSG:4326:18",
            "EPSG:4326:19",
            "EPSG:4326:20",
            "EPSG:4326:21",
          ],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          // tilingScheme: new Cesium.WebMercatorTilingScheme(),
        });

        viewer.imageryLayers.addImageryProvider(shadedRelief1);
        // 设置摄像头视图
      },
    },
    {
      text: "加载OGC-WMTS-----测试3",
      onselect: async function () {
        removeAllImagery();
        console.log("加载OGC-WMTS-----测试3");
        var shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021%3Apublic2021new&style=&tilematrixset=EPSG%3A4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021:public2021new&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{level}&TileCol={col}&TileRow={row}",
          // url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts?authkey=50ee80e3-2c48-401c-8544-5d1e764cbdc4&layer=jbt_xht_gkb_2021:public2021new&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
          url: new Cesium.Resource({
            url: "https://geoserver.whupi.cn:8081/geoserver/gwc/service/wmts",
            queryParameters: {
              authkey: "50ee80e3-2c48-401c-8544-5d1e764cbdc4",
              layer: "jbt_xht_gkb_2021:public2021new",
              tilematrixset: "EPSG:4326",
              Format: "image/png",
              Service: "WMTS",
              Request: "GetTile",
              Version: "1.0.0",
              TileMatrix: "{TileMatrix}",
              TileCol: "{TileCol}",
              TileRow: "{TileRow}",
            },
          }),

          // .getDerivedResource({
          //   url: "TileMatrix={TileMatrix}&TileCol={col}&TileRow={row}",
          //   templateValues: {
          //     row: "{TileRow}",
          //     col: "{TileCol}",
          //   },
          // }),
          layer: "jbt_xht_gkb_2021:public2021new",
          format: "image/png",
          tileMatrixSetID: "EPSG:4326",
          style: "",
          tileMatrixLabels: [
            "EPSG:4326:0",
            "EPSG:4326:1",
            "EPSG:4326:2",
            "EPSG:4326:3",
            "EPSG:4326:4",
            "EPSG:4326:5",
            "EPSG:4326:6",
            "EPSG:4326:7",
            "EPSG:4326:8",
            "EPSG:4326:9",
            "EPSG:4326:10",
            "EPSG:4326:11",
            "EPSG:4326:12",
            "EPSG:4326:13",
            "EPSG:4326:14",
            "EPSG:4326:15",
            "EPSG:4326:16",
            "EPSG:4326:17",
            "EPSG:4326:18",
            "EPSG:4326:19",
            "EPSG:4326:20",
            "EPSG:4326:21",
          ],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          // tilingScheme: new Cesium.WebMercatorTilingScheme(),
        });

        viewer.imageryLayers.addImageryProvider(shadedRelief1);
        // 设置摄像头视图
      },
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
